
/*动画相关*/
.ani-logo{animation:ani-logo .8s ease-out forwards;}
@keyframes ani-logo{
    from{transform: translatey(0);}
    to{transform: translatey(93px);}
}

.ani-music{ animation: ani-music 2s linear infinite;}
@keyframes ani-music{
    from{}
    to{transform: rotate(360deg);}
}

.ani-room-bg{animation:ani-room-bg 1.5s ease-out forwards;}
@keyframes ani-room-bg{
    from{ }
    to{transform:scale(2)}
}

/*.ani-popup-line{height:344px;margin-top:-252px;background-color: #00a5ff;;}*/
.ani-popup-line{/*animation: ani-popup-line .8s  forwards;*/display: none;}
@keyframes ani-popup-line{
    from{opacity: 1;height:0; }
    90%{ opacity: .4;}
    to{ opacity: 0;height:344px;margin-top:-252px;}

    /*
    from{height:0;margin-top:-85px;}
    to{height:395px;margin-top:-280px;}*/
}
.ani-popup-body{animation: ani-popup-body .6s ease-out forwards ;}
@keyframes ani-popup-body{
    from{margin-top:0; height:0;}
    to{margin-top:-198px; height:396px;}
    /*
    from{height:0;margin-top:-85px;}
    to{height:395px;margin-top:-280px;}*/
}

.ani-page1-light{ animation: ani-page1-light 3.5s ease-in infinite;}
@keyframes ani-page1-light{
    from{margin-left:-440px;}
    14%{margin-left:300px;}
    to{margin-left:300px;}
}



.ani-page1-glow{animation: ani-page1-glow 1.6s linear infinite;}
@keyframes ani-page1-glow {
    from{transform:rotate(0deg) scale(.6);}
    25%{transform:rotate(90deg) scale(1);}
    50%{transform:rotate(180deg) scale(.6);}
    75%{transform:rotate(270deg) scale(1);}
    to{transform:rotate(360deg) scale(.6);}
}

.ani-scale{animation: ani-scale .2s ease-in-out infinite alternate;}
@keyframes ani-scale {
    from{ opacity: 1;}
    to{transform: scale(.8); opacity: .6;}
}

.ani-page3-arrow{animation: ani-page3-arrow 1.2s ease-in-out infinite;}
@keyframes ani-page3-arrow {
    from{ transform: scale(1.1); opacity: 1;}
    to{transform: scale(1); opacity: .4;}
}

.ani-step-text{animation: ani-step-text 2s linear infinite ;}
@keyframes ani-step-text {
    from{transform: translate3d(0,0,0);}
    to{transform: translate3d(0,-100%,0);}
}
/*
.ani-screen-normal{animation:ani-screen-normal 4s linear infinite;opacity: 0;}
@keyframes ani-screen-normal{
    from{ opacity: 0; }
    1%{ opacity: 1; }
    50%{ opacity: 1; }
    51%{ opacity: 0; }
    to{ opacity: 0; }
}
*/

.ani-screen-blank{animation:ani-screen-blank 1s linear infinite;opacity: 0;}
@keyframes ani-screen-blank {
    from{ opacity: 0; }
    50%{ opacity: 1; }
    to{ opacity: 0; }

    /*from {transform:scaley(1);opacity:0;}
    15%{transform:scaley(.3);}
    25%{transform:scaley(.8);opacity: 1;}
    35%{transform:scaley(1);}
    50%{transform:scaley(1);opacity:1;}
    to{transform:scaley(1);opacity:1;}*/
}
/*.ani-screen-blank{animation:ani-screen-blank 2s linear infinite; }
@keyframes ani-screen-blank {
    from {transform:scaley(1);opacity:1;}
    15%{transform:scaley(.3);}
    25%{transform:scaley(.8);}
    30%{transform:scaley(.5);opacity: 1;}
    50%{transform:scaley(1);opacity:0;}
    to{transform:scaley(1);opacity:1;}
}*/

.ani-circle-rotate{animation:ani-circle-rotate 2s linear infinite;}
@keyframes ani-circle-rotate{
    from{}
    to{transform:rotate(360deg);}
}
.ani-scan-light{animation:ani-scan-light .6s linear forwards;}
@keyframes ani-scan-light{
    from{}
    to{transform: translatey(426px);}
}

.ani-page3-sight{animation:ani-page3-sight 10s linear infinite alternate;}
@keyframes ani-page3-sight{
    from{}
    30%{transform:rotate(180deg);}
    40%{transform:rotate(120deg);}
    80%{transform:rotate(320deg);}
    to{transform:rotate(200deg);}
}

.ani-shoot-shadow{ animation: ani-shoot-shadow .4s linear forwards; background-color: #fff;}
@keyframes ani-shoot-shadow{
    from{transform:scale(.2); opacity: 5;}
    to{transform:scale(1); opacity: 0;}
}

.ani-shoot-target1{animation:ani-shoot-target1 .4s linear forwards;}
@keyframes ani-shoot-target1{
    from{ left: -210px;top: 250px; transform: scale(.5);}
    to{ left: 60px;top: 400px;transform: scale(1); }
}
.ani-shoot-target2{animation:ani-shoot-target2 .4s linear forwards;}
@keyframes ani-shoot-target2{
    from{ left: -130px;top: -160px; transform: scale(.5);}
    to{ left: 60px;top: 220px;transform: scale(1); }
}

.ani-cursor{animation:ani-cursor .6s linear infinite;opacity: 1;}
@keyframes ani-cursor{
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
    /*from{ opacity: 0;}
    1%{opacity:1;}
    50%{opacity:1;}
    51%{opacity:0;}
    99%{ opacity: 0;}
    to{ opacity: 1;}*/
}

.ani-radar-scan{animation:ani-radar-scan 2s linear infinite;}
@keyframes ani-radar-scan{
    from{}
    to{transform:rotate(360deg);}
}

.ani-radar-target{animation:ani-radar-target 1s linear infinite;}
@keyframes ani-radar-target{
    from{background-color: #40e2ff;}
    to{transform:scale(1.5); background-color: #fff;}
}

.ani-target-plane1{animation:ani-target-plane1 1s ease-in infinite;}
@keyframes ani-target-plane1{
    from{transform:scale(.2); opacity: .2;}
    to{transform:translate(600px,200px) scale(.8); opacity: 1;}
}
.ani-target-plane2{animation:ani-target-plane2 1.4s ease-in infinite;}
@keyframes ani-target-plane2{
    from{left:-210px;top:0; transform:rotate(15deg) scale(.2); opacity: .2;}
    60%{ transform:rotate(15deg)  scale(1); opacity: 1;}
    to{left:500px;top:810px; transform:rotate(15deg) scale(.2); opacity: .2;}
}

.ani-target-plane3{animation:ani-target-plane3 1.6s ease-in infinite;}
@keyframes ani-target-plane3{
    from{left:-210px;top:200px; transform:rotate(-15deg) skewx(30deg) scale(.2); opacity: .2;}
    60%{ transform:rotate(-15deg)  scale(.8); opacity: .6;}
    to{left:700px;top:410px; transform:rotate(-15deg) scale(.2); opacity: .2;}
}

.ani-target-plane4{animation:ani-target-plane4 2s ease-in infinite;}
@keyframes ani-target-plane4{
    from{left:-210px;top:200px; transform:skewy(30deg) scale(.2); opacity: .2;}
    to{left:700px;top:810px; transform:rotate(-15deg) scale(.5); opacity: .5;}
}

.ani-target-missile1{animation: ani-target-missile1 1s ease-in infinite;}
@keyframes ani-target-missile1{
    from{}
    50%{ opacity: .8;}
    to{left:570px;top:320px; opacity:.5;}
}

.ani-target-missile2{animation: ani-target-missile2 .8s ease-in infinite;}
@keyframes ani-target-missile2{
    from{top:300px;transform: rotate(-30deg);}
    to{left:570px;top:380px;transform: rotate(-30deg);}
}

    .ani-target-missile3{animation: ani-target-missile3 1.4s ease-in infinite;}
@keyframes ani-target-missile3{
    from{left:-10px;top:200px; transform:rotate(-15deg) skewx(30deg) scale(.2); opacity: .2;}
    60%{ transform:rotate(-15deg)  scale(.8); opacity: .6;}
    to{left:700px;top:410px; transform:rotate(-15deg) scale(.2); opacity: .2;}
}

.ani-target-missile4{animation: ani-target-missile4 1.2s ease-in infinite;transform:rotate(30deg);}
@keyframes ani-target-missile4{
    from{}
    50%{ opacity: 1;}
    to{left:600px;top:800px; opacity: .5;}
}

.ani-page4-circle{ animation: ani-page4-circle 2s infinite;}
@keyframes ani-page4-circle{
    from{ opacity: .3;}
    50%{ opacity: 1;}
    to{ opacity: .3;}
}
.ani-page4-light{animation: ani-page4-light 2s linear infinite;}
@keyframes ani-page4-light{
    from{}
    to{transform:rotate(360deg);}
}



.ani-bar-red{animation:ani-bar-red 600s linear forwards;}
.ani-bar-green{animation:ani-bar-red 1s linear forwards;}
@keyframes ani-bar-red{
    from{}
    to{width:100%}
}
.ani-bar-effect{animation:ani-bar-effect .5s linear infinite alternate;}
@keyframes ani-bar-effect{
    from{transform: scale(1);}
    to{transform: scale(1.8);}
}

.ani-door-left{ animation: ani-door-left 2s forwards;}
@keyframes ani-door-left{
    from{left:0;}
    to{left:-640px;}
}
.ani-door-right{ animation: ani-door-right 2s forwards;}
@keyframes ani-door-right{
    from{right:0;}
    to{right:-640px;}
}

.ani-nums-item-up{ animation: ani-nums-item-up 1s linear infinite;}
@keyframes ani-nums-item-up{
    from{top:10px; opacity: 1;}
    to{top:4px;opacity:.4;}
}

.ani-nums-item-down{ animation: ani-nums-item-down 1s linear infinite;}
@keyframes ani-nums-item-down{
    from{bottom:10px; opacity: 1;}
    to{bottom:4px;opacity:.4;}
}

.ani-page7{animation:ani-page7 1s forwards .5s; opacity: .5;}
@keyframes ani-page7{
    from{ opacity: .5;}
    to{ opacity: 1;z-index: 100;}
}

.ani-page7-phone{animation:ani-page7-phone 1s linear  alternate infinite; }
@keyframes ani-page7-phone{
    from{ transform: translatey(-5px);}
    to{ transform: translatey(5px);}
}


.ani-page7-circle1-outer{animation: ani-page7-circle-outer  1s  linear infinite;}
@keyframes ani-page7-circle-outer{
    from{}
    to{transform: rotate(360deg);}
}
.ani-page7-circle1{animation: ani-page7-circle1 1s linear infinite;}
@keyframes ani-page7-circle1{
    from{}
    to{transform: rotate(-360deg);}
}

.ani-page7-circle2{animation: ani-page7-circle2 1s  linear infinite;}
@keyframes ani-page7-circle2{
    from{}
    to{transform: rotate(360deg);}
}

.ani-btn-light{ animation: ani-btn-light 1s linear infinite;}
@keyframes ani-btn-light{
    from{}
    60%{left:-40px;}
    to{left:40px;}
}





